<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../store/userStore';
import { showToast, showConfirmDialog } from 'vant';

const router = useRouter();
const userStore = useUserStore();

// 定义组件属性
const props = defineProps({
  // 用户信息对象
  userInfo: {
    type: Object,
    // 默认值
    default: () => ({
      avatar: "https://img0.baidu.com/it/u=2334035400,1894657718&fm=253&app=138&f=JPEG?w=500&h=500", // 默认头像
      nickname: "用户昵称",
      email: "user@example.com",
    }),
  },
  // 点击事件处理函数
  onClick: {
    type: Function,
    default: () => {},
  },
  // 订单类型列表
  orderTypes: {
    type: Array,
    // 默认订单类型
    default: () => [
      { icon: "balance-pay", text: "待付款", badge: 2 },
      { icon: "logistics", text: "待发货", badge: 0},
      { icon: "send-gift", text: "待收货", badge: 1 },
      { icon: "comment", text: "待评价", badge: 0 },
      { icon: "after-sale", text: "退款/售后", badge: 0 },
    ],
  },
  // 功能列表
  functionList: {
    type: Array,
    default: () => [
      { icon: "service", text: "联系客服", path: "/service" },
      { icon: "underway-o", text: "浏览记录", path: "/browsing-history" }, // 新增浏览记录功能
      { icon: "setting", text: "设置", path: "/settings" },
    ],
  },
  // 是否启用暗色模式 (这个属性现在不再使用)
  isDarkMode: {
    type: Boolean,
    default: false,
  },
});

// 定义组件事件 (移除 toggle-theme 事件)
const emit = defineEmits(["click-order", "click-all", "click-function"]);

// 创建本地的暗色模式状态
const localIsDarkMode = ref(false);

// 组件挂载时从本地存储恢复主题设置
onMounted(() => {
  const savedTheme = localStorage.getItem('darkMode');
  if (savedTheme !== null) {
    localIsDarkMode.value = JSON.parse(savedTheme);
    if (localIsDarkMode.value) {
      document.documentElement.setAttribute('data-theme', 'dark');
      // 添加这一行来确保 Vant 组件也切换主题
      document.documentElement.classList.add('van-theme-dark');
    }
  }
});

// 处理订单类型点击
const handleOrderClick = (index) => {
  emit("click-order", index);
};

// 处理全部订单点击
const handleAllOrdersClick = () => {
  emit("click-all");
};

// 处理功能项点击
const handleFunctionClick = (item, index) => {
  // 如果是联系客服，显示弹窗
  if (item.text === "联系客服") {
    showConfirmDialog({
      title: '联系客服',
      message: '请拨打0760-22222222联系客服',
      confirmButtonText: '确认',
      showCancelButton: false
    });
  } else if (item.text === "浏览记录") {
    // 跳转到浏览记录页面
    router.push('/browsing-history');
  } else if (item.text === "设置") {
    // 跳转到设置页面
    router.push('/settings');
  } else {
    // 其他功能项保持原来的逻辑
    emit("click-function", { path: item.path, index });
  }
};

// 在 handleToggleTheme 函数中，添加对 Vant 主题的支持
const handleToggleTheme = () => {
  localIsDarkMode.value = !localIsDarkMode.value;
  localStorage.setItem('darkMode', localIsDarkMode.value);

  if (localIsDarkMode.value) {
    document.documentElement.setAttribute('data-theme', 'dark');
    // 添加这一行来确保 Vant 组件也切换主题
    document.documentElement.classList.add('van-theme-dark');
  } else {
    document.documentElement.removeAttribute('data-theme');
    // 添加这一行来确保 Vant 组件也切换回默认主题
    document.documentElement.classList.remove('van-theme-dark');
  }
};

// 处理退出登录
const handleLogout = async () => {
  // 清除用户信息
  userStore.clearUser();

  // 显示退出登录提示
  showToast('已退出登录');

  // 跳转到登录页 (使用 replace 而不是 push)
  await router.replace('/login');

  // 如果需要强制刷新页面以确保状态清除，可以取消下面的注释
  // window.location.reload();
};
</script>

<template>
  <!-- 用户信息卡片 -->
  <div class="user-info-card" @click="props.onClick">
    <!-- 用户头像 -->
    <div class="user-avatar">
      <img :src="props.userInfo.avatar" alt="用户头像" />
    </div>

    <!-- 用户详细信息 -->
    <div class="user-details">
      <h2 class="user-nickname">{{ props.userInfo.nickname }}</h2>
      <p class="user-email">{{ props.userInfo.email }}</p>
    </div>

    <!-- 右侧箭头图标 -->
    <van-icon name="arrow" class="arrow-icon" />
  </div>

  <!-- 订单卡片容器 -->
  <div class="card-container">
    <!-- 卡片头部 -->
    <div class="card-header">
      <span class="card-title">我的订单</span>
      <div class="card-more" @click="handleAllOrdersClick">
        <span>全部订单</span>
        <van-icon name="arrow" />
      </div>
    </div>

    <!-- 订单类型列表 -->
    <div class="order-types">
      <div
        v-for="(item, index) in props.orderTypes"
        :key="index"
        class="order-type-item"
        @click="handleOrderClick(index)"
      >
        <!-- 图标包装器 -->
        <div class="icon-wrapper">
          <van-icon :name="item.icon" />
          <!-- 徽章（如果有未处理订单） -->
          <div v-if="item.badge > 0" class="badge">{{ item.badge }}</div>
        </div>
        <span>{{ item.text }}</span>
      </div>
    </div>
  </div>

  <!-- 功能列表卡片 -->
  <div class="card-container function-card">
    <div class="function-list">
      <!-- 常规功能项 -->
      <div
        v-for="(item, index) in props.functionList"
        :key="index"
        class="function-item"
        @click="handleFunctionClick(item, index)"
      >
        <van-icon :name="item.icon" />
        <span>{{ item.text }}</span>
        <van-icon name="arrow" class="arrow-right" />
      </div>

      <!-- 主题切换选项 -->
      <div class="function-item theme-toggle-item">
        <van-icon :name="localIsDarkMode ? 'sunny' : 'moon'" />
        <span>{{
          localIsDarkMode ? "切换到亮色模式" : "切换到暗色模式"
        }}</span>
        <!-- 使用 Vant 的 Switch 组件 -->
        <van-switch
          :model-value="localIsDarkMode"
          size="20px"
          @update:model-value="handleToggleTheme"
        />
      </div>
    </div>
  </div>

  <!-- 退出登录按钮 -->
  <div class="logout-button">
    <van-button type="danger" block @click="handleLogout">退出登录</van-button>
  </div>
</template>

<style lang="scss" scoped>
/* 用户信息卡片样式 */
.user-info-card {
  display: flex; /* 使用弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  padding: 20px; /* 内边距 */
  background-color: var(--van-primary-color); /* 使用主题色作为背景 */
  border-radius: var(--van-radius-lg); /* 圆角边框 */
  margin-bottom: 20px; /* 底部外边距 */
  color: white; /* 文字颜色为白色 */
  position: relative; /* 相对定位 */
  box-shadow: var(--van-shadow-2); /* 添加阴影效果 */
  margin-top: 20px;
  width: 90%;
  margin-left: 20px;
  /* 用户头像样式 */
  .user-avatar {
    width: 70px; /* 头像宽度 */
    height: 70px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    overflow: hidden; /* 隐藏溢出部分 */
    border: 3px solid rgba(255, 255, 255, 0.3); /* 白色边框 */
    margin-right: 16px; /* 右侧外边距 */

    img {
      width: 100%; /* 图片宽度100% */
      height: 100%; /* 图片高度100% */
      object-fit: cover; /* 图片填充方式 */
    }
  }

  /* 用户详细信息样式 */
  .user-details {
    flex: 1; /* 占据剩余空间 */

    /* 用户昵称样式 */
    .user-nickname {
      font-size: var(--van-font-size-lg); /* 字体大小 */
      font-weight: var(--van-font-bold); /* 字体粗细 */
      margin: 0 0 4px 0; /* 外边距 */
    }

    /* 用户邮箱样式 */
    .user-email {
      font-size: var(--van-font-size-md); /* 字体大小 */
      margin: 0; /* 外边距 */
      opacity: 0.8; /* 透明度 */
    }
  }

  /* 箭头图标样式 */
  .arrow-icon {
    font-size: var(--van-icon-font-size); /* 字体大小 */
    color: rgba(255, 255, 255, 0.8); /* 颜色 */
  }
}

/* 卡片容器样式 */
.card-container {
  background-color: var(--van-card-background); /* 背景色 */
  border-radius: var(--van-card-border-radius); /* 圆角 */
  padding: var(--van-card-padding); /* 内边距 */
  margin-bottom: 16px; /* 底部外边距 */
  box-shadow: var(--van-card-shadow); /* 阴影效果 */
  width: 90%;
  margin-left: 20px;

  /* 卡片头部样式 */
  .card-header {
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    margin-bottom: 16px; /* 底部外边距 */

    /* 卡片标题样式 */
    .card-title {
      font-size: var(--van-font-size-md); /* 字体大小 */
      font-weight: var(--van-font-bold); /* 字体粗细 */
      color: var(--van-text-color); /* 文字颜色 */
    }

    /* 更多选项样式 */
    .card-more {
      display: flex; /* 弹性布局 */
      align-items: center; /* 垂直居中 */
      font-size: var(--van-font-size-sm); /* 字体大小 */
      color: var(--van-text-color-3); /* 文字颜色 */

      /* 图标样式 */
      .van-icon {
        margin-left: 4px; /* 左侧外边距 */
        font-size: var(--van-font-size-xs); /* 字体大小 */
      }
    }
  }

  /* 订单类型区域样式 */
  .order-types {
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 均匀分布 */

    /* 订单类型项样式 */
    .order-type-item {
      display: flex; /* 弹性布局 */
      flex-direction: column; /* 纵向排列 */
      align-items: center; /* 水平居中 */
      flex: 1; /* 占据均等空间 */
      cursor: pointer;

      /* 图标包装器样式 */
      .icon-wrapper {
        position: relative; /* 相对定位 */
        margin-bottom: 8px; /* 底部外边距 */

        /* 图标样式 */
        .van-icon {
          font-size: 24px; /* 字体大小 */
          color: var(--van-primary-color); /* 使用主题色 */
        }

        /* 徽章样式 */
        .badge {
          position: absolute; /* 绝对定位 */
          top: -8px; /* 顶部位置 */
          right: -8px; /* 右侧位置 */
          background-color: var(--van-danger-color); /* 背景色 */
          color: white; /* 文字颜色 */
          font-size: var(--van-font-size-xs); /* 字体大小 */
          min-width: 16px; /* 最小宽度 */
          height: 16px; /* 高度 */
          border-radius: 8px; /* 圆角 */
          display: flex; /* 弹性布局 */
          align-items: center; /* 垂直居中 */
          justify-content: center; /* 水平居中 */
          padding: 0 4px; /* 内边距 */
        }
      }

      /* 文本样式 */
      span {
        font-size: var(--van-font-size-xs); /* 字体大小 */
        color: var(--van-text-color); /* 文字颜色 */
      }
    }
  }
}

/* 功能列表卡片样式 */
.function-card {
  .function-list {
    /* 功能项样式 */
    .function-item {
      display: flex; /* 弹性布局 */
      align-items: center; /* 垂直居中 */
      padding: 16px 0; /* 上下内边距 */
      border-bottom: 1px solid var(--van-border-color); /* 底部边框 */
      cursor: pointer;

      /* 最后一项不显示底部边框 */
      &:last-child {
        border-bottom: none;
      }

      /* 图标样式 */
      .van-icon {
        font-size: var(--van-icon-size); /* 字体大小 */
        color: var(--van-primary-color); /* 使用主题色 */
        margin-right: 12px; /* 右侧外边距 */

        /* 右侧箭头样式 */
        &.arrow-right {
          color: var(--van-text-color-3); /* 颜色 */
          margin-left: auto; /* 自动左边距 */
          margin-right: 0; /* 右侧外边距 */
        }
      }

      /* 文本样式 */
      span {
        flex: 1; /* 占据剩余空间 */
        font-size: var(--van-font-size-md); /* 字体大小 */
        color: var(--van-text-color); /* 文字颜色 */
      }
    }

    /* 主题切换项样式 */
    .theme-toggle-item {
      .van-switch {
        margin-left: auto;
      }
    }
  }
}

/* 退出登录按钮样式 */
.logout-button {
  margin-top: 30px; /* 顶部外边距 */
  padding: 0 16px; /* 左右内边距 */
  width: 90%;
  margin-left: 20px;
  margin-bottom: 30px;
}

/* 暗色模式适配 */
[data-theme="dark"] {
  .card-container {
    background-color: var(--van-background-2); /* 使用主题变量 */
  }

  .card-container:not(.function-card) {
    .order-types .order-type-item span {
      color: var(--van-text-color); /* 使用正确的主题变量而不是固定红色 */
    }
  }

  .function-card {
    background-color: var(--van-background-2);

    .function-list .function-item {
      border-bottom-color: var(--van-border-color);
    }
  }
}
</style>